<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>第1个</li>
      <li>第2个</li>
      <li>第3个</li>
      <li>第4个</li>
      <li>第5个</li>
      <li>第6个</li>
      <li>第7个</li>
      <li>第8个</li>
      <li>第9个</li>
      <li>第10个</li>
    </ul>
    <script>
      //事件委托
      //实现点谁谁高亮
      //优点：减少注册次数，可以提高程序性能
      const ulDom = document.querySelector("ul");
      ulDom.addEventListener("click", (e) => {
        const liListDom = document.querySelectorAll("li");
        for (const liDom of liListDom) {
          liDom.style.backgroundColor = "white";
        }
        e.target.style.backgroundColor = "red";
      });
    </script>
  </body>
</html>
